/**
 * 使用 setState 修改状态
 * setState的作用：更新state，驱动界面变化
 * 语法： this.setState({属性名：值})
 * 注意：只能通过 setState 修改数据 - 不允许直接修改 state
 */

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

class App extends React.Component {
  
  // 状态变量
  state = {
    count: 0,
  };
  handleClick = (num) => {
    this.setState({
      count: this.state.count + num,
    });
  };
  handleDec = (num) => {
    this.setState({
      count: this.state.count - num,
    });
  };
  render() {
    return (
      <div>
        <div>当前数值为：{this.state.count}</div>
        {/* <button onClick={this.handleClick}>+1</button> */}
        {/* 传递实参来修改 */}
        <button onClick={() => this.handleClick(10)}>+1</button>
        <span>{this.state.count}</span>
        <button onClick={() => this.handleDec(10)}>-1</button>
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<App></App>);
